<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .warn{
            color: red;
        }
    </style>
    <script src="js/vue.js"></script>

</head>
<body>
    <div id="app">
        <form action="#">
            <input type="text" ref="uname">
            <button @click.prevent="add()">change title</button>
        </form>
        <h1 :class={warn:warn}>{{title}}</h1>
        <button @click="warn=!warn">chang warn</button>

        <h3>user list</h3>
        <ul>
            <li v-for="(user,index) of users">{{index}}--{{user.name}}---{{user.age}}
            <button @click="deleteUser(user)">删除</button>
            </li>
        </ul>
        <h4>用户的数量是：{{total}}</h4>

        <button @click="show=!show">show</button><div v-if="show">show me</div>

        <button @click="a++">add a</button>
        <div v-if="a==1">a=1</div>
        <div v-else-if="a==2">a=2</div>
        <div v-else>other</div>

    </div>

    <hr>
    <div id="app1">
        <h1>{{name}}</h1>
    </div>

    <script>
        let app1=new Vue({
            el:'#app1',
            data:{
                name:"Hello"
            }
        });


        let app=new Vue({
            el:'#app',
            data:{
                title:'Hello World',
                warn:true,
                show:true,
                a:0,
                users:[{name:'John',age:100},
                    {name:'Tom',age:12},
                    {name:'Alice',age:19}]

            },
            methods:{
                add(){
                    let v=this.$refs.uname.value
                    this.title=v
                },
                deleteUser(user){
                    let index=this.users.indexOf(user)
                    this.users.splice(index,1)
                }
            },
            computed:{
                total(){
                    return this.users.length;
                }
            }
        })
    </script>
</body>
</html>